<template>
	<view class="pj">
		<view class="ts">
			<view class="tu">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="3" :previewFullImage="true">
					<view class="suiji">
						<image src="/static/xjsy/xj.png" mode=""></image>
						<text>添加图片</text>
					</view>
				</u-upload>
			</view>
			<!-- <view class="tu">
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
					:maxCount="1" accept="video">
					<view class="suiji">
						<image src="/static/xjsy/sx.png" mode=""></image>
						<text>添加短视频</text>
					</view>
				</u-upload>
			</view> -->
		</view>
		<view class="pf">
			<image src="/static/tp.png" mode=""></image>
			<text>综合评分</text>
			<view class="pff">
				<u-rate :count="count" v-model="value"></u-rate>
			</view>
			<text>{{status}}</text>
		</view>
		<view class="pj">
			<u--textarea v-model="value1" placeholder="请输入您的真实感受哦" count></u--textarea>
			<text style="color: #dd2f24;font-size: 12px;" v-show="showjs">感受不少于18个字哦</text>
		</view>
		<view class="btnnk" @click="tjEvaluate">
			<u-button type="primary" color="#dd2f24" text="提交评价"></u-button>
		</view>
		<view class="tu" @click="qieh">
			<image src="/static/dui/对勾.png" v-if="flagB" style="width: 18px;height: 18px;" mode=""></image>
			<image src="/static/dui/对勾-copy.png" v-else style="width: 18px;height: 18px;" mode=""></image>
			<text style="padding-left:5px;color:#acacac;">

				此评价匿名展示
			</text>
		</view>




	</view>
</template>

<script>
	import {
		base_Url
	} from '../../../utils/Url';

	export default {
		data() {
			return {
				flagB: false,
				fileList1: [],
				fileList2: [],
				count: 5,
				value: 0,
				value1: "",
				showjs: false,
				orderinfo: {}
			}
		},
		computed: {
			status() {
				switch (this.value) {
					case 1:
						return "差";
					case 2:
						return "较差";
					case 3:
						return "一般";
					case 4:
						return "好";
					case 5:
						return "最好";
					default:
						return ""; // 如果没有选定评分，显示空
				}
			}
		},
		onLoad(e) {
			if (e) {
				console.log("支付信息2", JSON.parse(decodeURIComponent(e.item)));
				this.orderinfo = {
					...JSON.parse(decodeURIComponent(e.item))
				}


			}
		},
		methods: {
			qieh() {
				this.flagB = !this.flagB
			},
			tjEvaluate() {
				// if (this.fileList1.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传图片'
				// 	});
				// 	return
				// }
				if (this.value == 0) {
					uni.showToast({
						title: '请打分'
					});
					return
				}
				if (this.value1.split("").length < 18) {
					uni.showToast({
						title: '请输入您的感受'
					});
					this.showjs = true
					return
				} else {
					this.showjs = false
				}
				const aa = uni.getStorageSync("userinfo")
				console.log("useri", aa);
				const akk = this.fileList1.map(item => {
					console.log("数据", item);
					return {
						...item[0]
					}
				})
				console.log(akk);
				const data = {
					image: akk,
					userId: JSON.parse(aa).id,
					comprehensiveScore: this.value,
					feel: this.value1,
					serviceId: this.orderinfo.serviceId[0],
					isAnonymous: !this.flagB,
					specifications: "" //规格


				}
				console.log("评价的相关", data);
				this.$http.post("/commentForm/insert", data).then(res => {
					this.fileList1 = []
					this.value1 = ""
					this.value = 0
					console.log("res", res);
					if (res.code == 200) {
						uni.showToast({
							title: '评价成功'
						});
						this.$http.put('/buyrOrder/update', {
							id: this.orderinfo.id,
							orderStatus: 3
						}).then(res => {
							console.log('res', res);
							uni.navigateBack()
						})
						// this.$showMsg("评价成功")
						// uni.
						// this.$toPage()
					}
				})

			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.log("wenjian", event);
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					console.log(lists);
					const result = await this.uploadFilePromise(lists[i].url);
					console.log("result", result);
					let item = this[`fileList${event.name}`][fileListLen];
					console.log("item", item);
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						// Object.assign(item, {
						// 	status: "success",
						// 	message: "",
						// 	url: result,
						//})
						Object.assign(item, {
							...result,
							status: "success"
						})
					);
					// this.
					fileListLen++;
				}
				console.log("fileList", this[`fileList${event.name}`]);
				// if (this.fileList1.length + lists.length > 3) {
				// 	this.$showMsg("最多只能上传三张")

				// }
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({

						url: base_Url + "/common/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							console.log("res", res);
							// setTimeout(() => {
							resolve(JSON.parse(res.data).result);
							// }, 1000);
						},
					});
				});
			},
		}
	}
</script>

<style lang="less">
	.pj {
		.ts {
			display: flex;

			.tu {
				margin: 8px;
				padding: 8px;
				// background-color: aqua;
				width: auto;
				height: 65px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 4px;
				border: 2px dashed #ccc;

				.suiji {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 45px;
						height: 45px;
					}

					text {}
				}
			}
		}

		.pf {
			margin: 8px;
			display: flex;
			align-items: center;

			image {
				width: 50px;
				height: 50px;
				border-radius: 3px;
			}

			text {
				margin-left: 8px;
				font-size: 16px;
			}

			.pff {
				margin-left: 10px;
			}
		}

		.pj {
			padding: 8px;

		}

		.btnnk {
			padding: 8px;
		}

		.tu {
			margin-left: 8px;
			display: flex;
			align-items: center;
		}
	}
</style>